<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北极星 - 全栈开发工程师 | 自由职业者</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            line-height: 1.6;
            color: #333;
            background-color: #f9f9f9;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 导航栏 */
        header {
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
        }

        .logo span {
            color: #3498db;
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 30px;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #3498db;
        }

        /* 英雄区域 */
        .hero {
            background: linear-gradient(135deg, #3498db, #2c3e50);
            color: white;
            padding: 100px 0;
            text-align: center;
        }

        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 20px;
            max-width: 800px;
            margin: 0 auto 30px;
        }

        .btn {
            display: inline-block;
            background-color: #e74c3c;
            color: white;
            padding: 12px 30px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #c0392b;
        }

        /* 服务区域 */
        .services {
            padding: 80px 0;
            background-color: white;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-title h2 {
            font-size: 36px;
            color: #2c3e50;
        }

        .section-title p {
            color: #7f8c8d;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .service-card {
            background-color: #f9f9f9;
            padding: 30px;
            border-radius: 5px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .service-card i {
            font-size: 40px;
            color: #3498db;
            margin-bottom: 20px;
        }

        .service-card h3 {
            font-size: 24px;
            margin-bottom: 15px;
            color: #2c3e50;
        }

        /* 作品集 */
        .portfolio {
            padding: 80px 0;
            background-color: #f9f9f9;
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }

        .portfolio-item {
            position: relative;
            overflow: hidden;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .portfolio-item img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .portfolio-item:hover img {
            transform: scale(1.1);
        }

        .portfolio-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(44, 62, 80, 0.9);
            color: white;
            padding: 20px;
            transform: translateY(100%);
            transition: transform 0.3s;
        }

        .portfolio-item:hover .portfolio-overlay {
            transform: translateY(0);
        }

        /* 关于我 */
        .about {
            padding: 80px 0;
            background-color: white;
        }

        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

        .about-img img {
            width: 100%;
            border-radius: 5px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .about-text h3 {
            font-size: 28px;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        .skills {
            margin-top: 30px;
        }

        .skill-item {
            margin-bottom: 15px;
        }

        .skill-name {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .skill-bar {
            height: 10px;
            background-color: #ecf0f1;
            border-radius: 5px;
        }

        .skill-progress {
            height: 100%;
            background-color: #3498db;
            border-radius: 5px;
        }

        /* 联系 */
        .contact {
            padding: 80px 0;
            background-color: #f9f9f9;
        }

        .contact-form {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            padding: 40px;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .form-group textarea {
            height: 150px;
        }

        /* 页脚 */
        footer {
            background-color: #2c3e50;
            color: white;
            padding: 30px 0;
            text-align: center;
        }

        .social-links {
            margin: 20px 0;
        }

        .social-links a {
            color: white;
            margin: 0 10px;
            font-size: 20px;
            transition: color 0.3s;
        }

        .social-links a:hover {
            color: #3498db;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .hero h1 {
                font-size: 36px;
            }

            .hero p {
                font-size: 18px;
            }

            .about-content {
                grid-template-columns: 1fr;
            }

            .about-img {
                order: -1;
            }
        }
    </style>
    <!-- 引入Font Awesome图标 -->
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">-->
    <link rel="stylesheet" href="../../fontawesome-free-6.7.2-web/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<header>
    <div class="container">
        <nav>
            <div class="logo">北<span>极</span>星</div>
            <ul class="nav-links">
                <li><a href="#home">首页</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#portfolio">作品</a></li>
                <li><a href="#about">关于我</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </div>
</header>

<!-- 英雄区域 -->
<section class="hero" id="home">
    <div class="container">
        <h1>我是北极星，全栈开发工程师</h1>
        <p>专注于为企业与个人提供高质量的定制化软件开发服务，拥有10年以上行业经验，交付过50+成功项目。</p>
        <a href="#contact" class="btn">立即咨询</a>
    </div>
</section>

<!-- 服务区域 -->
<section class="services" id="services">
    <div class="container">
        <div class="section-title">
            <h2>我的服务</h2>
            <p>为您提供全方位的技术解决方案</p>
        </div>
        <div class="services-grid">
            <div class="service-card">
                <i class="fas fa-laptop-code"></i>
                <h3>网站开发</h3>
                <p>从简单的企业官网到复杂的电商平台，为您打造响应式、高性能的网站解决方案。</p>
            </div>
            <div class="service-card">
                <i class="fas fa-mobile-alt"></i>
                <h3>移动应用开发</h3>
                <p>iOS和Android原生应用开发，跨平台混合应用开发，满足您的移动业务需求。</p>
            </div>
            <div class="service-card">
                <i class="fas fa-server"></i>
                <h3>后端开发</h3>
                <p>构建稳定、安全、可扩展的后端系统，提供API开发、数据库设计等服务。</p>
            </div>
            <div class="service-card">
                <i class="fas fa-database"></i>
                <h3>数据库设计</h3>
                <p>专业的数据库架构设计、优化和维护，确保数据安全和高性能访问。</p>
            </div>
            <div class="service-card">
                <i class="fas fa-bug"></i>
                <h3>代码审查与优化</h3>
                <p>对现有代码进行审查、重构和优化，提高代码质量和系统性能。</p>
            </div>
            <div class="service-card">
                <i class="fas fa-cloud"></i>
                <h3>云服务部署</h3>
                <p>AWS、阿里云等云平台部署与维护，确保您的应用高可用、可扩展。</p>
            </div>
        </div>
    </div>
</section>

<!-- 作品集 -->
<section class="portfolio" id="portfolio">
    <div class="container">
        <div class="section-title">
            <h2>我的作品</h2>
            <p>部分精选项目展示</p>
        </div>
        <div class="portfolio-grid">
            <div class="portfolio-item">
                <img src="./images/dianshang.png" alt="电商平台项目">
                <div class="portfolio-overlay">
                    <h3>某品牌电商平台</h3>
                    <p>全栈开发，包含商品管理、支付系统、用户中心等模块。</p>
                </div>
            </div>
            <div class="portfolio-item">
                <img src="./images/erp.png" alt="企业ERP系统">
                <div class="portfolio-overlay">
                    <h3>制造业ERP系统</h3>
                    <p>定制化开发的生产管理、库存控制和供应链管理系统。</p>
                </div>
            </div>
            <div class="portfolio-item">
                <img src="./images/health.png" alt="健康管理APP">
                <div class="portfolio-overlay">
                    <h3>健康管理移动应用</h3>
                    <p>React Native开发的跨平台健康追踪应用。</p>
                </div>
            </div>
            <div class="portfolio-item">
                <img src="./images/edu.png" alt="在线教育平台">
                <div class="portfolio-overlay">
                    <h3>在线教育平台</h3>
                    <p>视频课程、直播教学、在线测试等功能的综合平台。</p>
                </div>
            </div>
            <div class="portfolio-item">
                <img src="./images/smartHome.png" alt="智能家居系统">
                <div class="portfolio-overlay">
                    <h3>智能家居控制系统</h3>
                    <p>物联网项目，实现家居设备的远程控制和自动化。</p>
                </div>
            </div>
            <div class="portfolio-item">
                <img src="./images/dataAnalysis.png" alt="数据分析平台">
                <div class="portfolio-overlay">
                    <h3>企业数据分析平台</h3>
                    <p>大数据可视化分析工具，帮助企业决策。</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 关于我 -->
<section class="about" id="about">
    <div class="container">
        <div class="section-title">
            <h2>关于我</h2>
            <p>了解更多关于我的信息</p>
        </div>
        <div class="about-content">
            <div class="about-text">
                <h3>全栈开发工程师 & 技术顾问</h3>
                <p>我是一名热爱技术的全栈开发工程师，拥有计算机科学学士学位。在过去10年中，我帮助各种规模的企业实现了他们的技术愿景，从初创公司到财富500强企业。</p>
                <p>我专注于使用现代技术栈构建高效、可扩展的应用程序。我的工作不仅仅是写代码，更是理解业务需求并提供最佳的技术解决方案。</p>
                <div class="skills">
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>Java/Python/Golang</span>
                            <span>95%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 99%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>JavaScript/TypeScript</span>
                            <span>95%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 95%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>React/Vue</span>
                            <span>90%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 90%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>Node.js/Python</span>
                            <span>85%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 85%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>数据库设计</span>
                            <span>80%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 80%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="about-img">
                <img src="https://via.placeholder.com/500x600?text=Developer+Photo" alt="张三的照片">
            </div>-->
        </div>
    </div>
</section>

<!-- 联系 -->
<section class="contact" id="contact">
    <div class="container">
        <div class="section-title">
            <h2>联系我</h2>
            <p>有项目需要讨论？请随时联系我</p>
        </div>
        <div class="contact-form" id="contactForm" action="https://formspree.io/f/mqkqjqjq" method="POST">
            <form>
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" name="name" placeholder="请输入您的姓名（选填）" >
                </div>
                <div class="form-group">
                    <label for="phone">电话</label>
                    <input type="text" id="phone" name="phone"  pattern="[0-9]{11}"
                           title="请输入11位手机号码" placeholder="请输入您的手机号码（必填）"  required>
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" name="email" placeholder="请输入您的邮箱（必填）" required>
                </div>
                <div class="form-group">
                    <label for="wechat">微信</label>
                    <input type="text" id="wechat" name="wechat" placeholder="请输入您的微信号（选填）" >
                </div>
                <div class="form-group">
                    <label for="qq">QQ</label>
                    <input type="text" id="qq" name="qq" placeholder="请输入您的QQ号（选填）" >
                </div>
                <div class="form-group">
                    <label for="subject">主题</label>
                    <input type="text" id="subject" name="subject" placeholder="请输入您的需求主题（必填）" required>
                </div>
                <div class="form-group">
                    <label for="project_desc">项目详情</label>
                    <textarea id="project_desc" name="project_desc" placeholder="请输入您的项目需求（必填）" required></textarea>
                </div>
                <button type="submit" class="btn">发送消息</button>
            </form>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer>
    <div class="container">
        <div class="logo">北<span>极</span>星</div>
        <p>全栈开发工程师 | 技术顾问 | 自由职业者</p>
        <div class="social-links">
            <a href="#"><i class="fab fa-github"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-stack-overflow"></i></a>
        </div>
        <p>&copy; 2025 北极星. 保留所有权利.</p>
    </div>
</footer>
<script type="module">
    import { apiBase } from './js/common.js'; // 导入API基础URL

    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止默认表单提交
            // 验证手机号
            const mobileInput = document.getElementById('phone');
            const mobileValue = mobileInput.value.trim();
            const mobileRegex = /^1[3-9]\d{9}$/;

            if (!mobileRegex.test(mobileValue)) {
                showError('请输入有效的11位手机号码', mobileInput);
                return;
            }
            // 收集表单数据
            const formData = new FormData(e.target);
           /* for (const [key, value] of formData) {
                console.log(key, value);
            }*/
            // 显示加载状态
            const submitBtn = this.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.textContent = '提交中...';

            // 发送AJAX请求
            fetch(apiBase+"/api/messages", {
                method: 'POST',
                body: formData,
                headers: {
                    'Accept': 'application/json'
                }
            }).then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    return response.json();
                }).then(data => {
                    // 隐藏表单，显示成功消息
                    document.getElementById('contactForm').style.display = 'none';
                    const responseDiv = document.getElementById('formResponse');
                    responseDiv.style.display = 'block';
                    responseDiv.innerHTML = `
            <div class="success-message">
                <h3>提交成功！</h3>
                <p>感谢您的联系，我们会尽快回复您。</p>
            </div>
        `;
                }).catch(error => {
                    // 显示错误消息
                    showError('提交失败: ' + error.message);
                    submitBtn.disabled = false;
                    submitBtn.textContent = '发送消息';
                });
        });
    });
    function showError(message, inputElement = null) {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message';
        errorDiv.textContent = message;
        errorDiv.style.color = 'red';
        errorDiv.style.marginTop = '10px';

        // 移除旧的错误消息
        const oldError = document.querySelector('.error-message');
        if (oldError) oldError.remove();

        if (inputElement) {
            inputElement.style.borderColor = 'red';
            inputElement.parentNode.appendChild(errorDiv);
        } else {
            document.getElementById('contactForm').appendChild(errorDiv);
        }
    }

</script>
</body>
</html>